在 Vue.js 中，computed 和 watch 是两种用于响应式数据处理的机制，但它们有不同的用途和工作方式。以下是它们的主要区别：

computed

1. 缓存：

   • computed 属性是基于它们的依赖进行缓存的。只有当依赖项发生变化时，computed 属性才会重新计算。
   • 这意味着如果多次访问同一个 computed 属性，且其依赖项没有变化，那么它将返回缓存的值，而不会重复计算。

2. 声明式：

   • computed 属性通常用于声明一个基于其他数据计算得出的值。
   • 它们通常用于简化模板中的复杂表达式。

3. 同步：

   • computed 属性是同步计算的，即它们会在依赖项变化时立即重新计算。

4. 使用方法：

   • 在模板中，你可以像使用普通数据属性一样使用 computed 属性。
   • 在脚本中，你可以通过 this.computedPropertyName 来访问它们。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

watch

1. 无缓存：

   • watch 选项用于观察和响应 Vue 实例上数据的变化。
   • 它不会缓存结果，而是每次数据变化时都会执行指定的回调函数。

2. 异步和副作用：

   • watch 通常用于执行异步操作或产生副作用（如 API 请求、手动 DOM 操作等）。
   • 你可以在回调函数中执行复杂的逻辑，包括异步操作。

3. 深度监听：

   • watch 可以配置为深度监听对象内部的变化（使用 deep: true 选项）。
   • 它还可以监听数组的变化（使用 handler 和 immediate 选项）。

4. 使用方法：

   • watch 选项是一个对象，其键是要监听的数据属性，值是一个回调函数或配置对象。

watch: {
  message(newVal, oldVal) {
    console.log(`Message changed from ${oldVal} to ${newVal}`);
    // 可以在这里执行异步操作或其他逻辑
  }
}

总结

• 使用 computed 来声明基于其他数据计算得出的属性，这些属性是缓存的，并且适合在模板中简化复杂表达式。
• 使用 watch 来观察和响应数据变化，执行异步操作或产生副作用。

选择使用 computed 还是 watch 取决于你的具体需求。如果你需要基于其他数据计算一个值，并且希望这个值是缓存的，那么使用 computed。如果你需要在数据变化时执行一些副作用（如 API 请求），那么使用 watch。